question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot import json file with text plugin or json plugin

See original GitHub issue

I’m submitting a bug report

  • Library Version: 0.18.0

Please tell us about your environment:

  • Operating System: Windows 7

  • Node Version: 5.10.1

  • NPM Version: 3.8.6

  • Browser: Chrome 52.0

  • Language: ESNext

Current behavior: We have several json files that we import into the client. With SystemJS we were doing import _defaults from './entity-default-definitions.json!json';

I’ve tried switching to import _defaults from 'json!./entity-default-definitions.json'; which produces { uid: 8, name: ‘writeBundles’, branch: false, error: { [Error: ENOENT: no such file or directory, open 'D:\Users\kminio\src2\tw-composer\thingworx-ui-platform\src\json.js '] errno: -4058, code: ‘ENOENT’, syscall: ‘open’, path: ‘D:\Users\kminio\src2\tw-composer\thingworx-ui-platform\src\json.js’, moduleTree: [ ‘entity/entity-defaults’ ], fileName: ‘D:/Users/kminio/src2/tw-composer/thingworx-ui-platform/src/entity/entity-defaults.js’ }, duration: [ 5, 603011213 ], time: 1472497970464 }

and also import _defaults from 'text!./entity-default-definitions.json'; closer but produces: { uid: 8, name: ‘writeBundles’, branch: false, error: [TypeError: Path must be a string. Received undefined], duration: [ 5, 706117176 ], time: 1472498084764 }

Expected/desired behavior:

  • What is the expected behavior? If I could load directly using requirejs json plugin that would be ideal. I could load as text and do a JSON.parse to achieve as well.
  • What is the motivation / use case for changing the behavior? Migrating to CLI from JSPM/SystemJS

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:15 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
fabioluzcommented, Mar 9, 2017

I could import a json file by creating a textProcessor step.

aurelia.json

"textProcessor": {
    "displayName": "Text",
    "source": "src/**/*.json"
  },

process-text.js

import gulp from 'gulp';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function processText() {
  return gulp.src(project.textProcessor.source)
    .pipe(changedInPlace({firstPass: true}))
    .pipe(build.bundle());
}

And finally

import Routes from 'text!../routes.json';
JSON.parse(Routes.app);

You can also add watchers to rebuild the app when changing json files.

0reactions
JeroenVinkecommented, Mar 15, 2017

Thanks for the quick response @RenathoAzevedo. Regarding it not doing dynamic loads, try and bundle all JSON files by changing this line to "**/*.{css,html,json}"

I did have an issue when I instruct the bundler to update JSON files whenever one changes (using a similar setup as @fabioluz), for which I opened an issue: https://github.com/aurelia/cli/issues/544.

I believe this issue has been resolved now so I’ll close this one

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't import json - WordPress.org
I tried uploading a backup (JSON) I did just before, but it's not importing. What can I do?
Read more >
How to Import JSON file as a Module - Bits and Pieces
A file extension (eg. .js or .json) or a MIME type is not enough to definitively determine the content type. It is possible...
Read more >
How to import a JSON file in ECMAScript 6? - Stack Overflow
In TypeScript or using Babel, you can import json file in your code. // Babel import * as data from './example.json'; const word...
Read more >
Import JSON file in code.ts - Figma Community Forum
Hi, I am trying to import a JSON file to my code.ts file but it does not work. I am trying to load...
Read more >
@rollup/plugin-json - npm
import json from '@rollup/plugin-json'; export default { input: 'src/index.js', output: { dir: 'output', format: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found