I have a typescript file that import a json file like this:
import DefaultMapping from "./default.json";
It compile with SWC like this in the js file:
var _defaultJson = require("./default.json");
However, SWC does not copy the JSON file in the build folder. Therefore, i have an error when I run the js file:
Error: Cannot find module './default.json'
Can someone help me please?
EDIT: I solve it partially by using require instead of import in the ts file and also using the --copy-files swc option. However, I still would like to NOT use require and use import instead if someone has an idea
Ok, I solved it by using the --copy-files options.
Here is my command:
swc ./src --out-dir dist --copy-files
Related
I'm working on a project that's based on a given sample project that uses a package named Seeso.
The sample project uses the 'cross-env' and 'parcel-bundler' packages which are both deprecated, and I would like to replace them with pure node.
I managed to create a backend that statically serves requested files and thus handles imports,
but the Seeso package seems to dynamically resolve its imports using a webpack bundle (I have little to no knowledge of webpack but not even a configuration file is present; just the bundle), and I get the following error after I changed the import path of Seeso in the easy-seeso.js file to its actual path:
Uncaught SyntaxError: The requested module '/external_modules/seeso/dist/seeso.js' does not provide an export named 'CalibrationAccuracyCriteria' (at easy-seeso.js:2:34)
because of
import Seeso, {InitializationErrorType, CalibrationAccuracyCriteria} from '/external_modules/seeso/dist/seeso.js';
How can I import the needed Seeso files from the webpack bundle with minimum work and understanding of webpack as possible? (Preferably without running webpack commands before running - would like to run 'node server.js' and that's it)
Here is the sample project:
https://github.com/visualcamp/seeso-sample-web
I am trying to convert a file tensorflow.js file (written in Node.js) with Browserify into plain Javascript. In the file there are two lines
import * as tf from '#tensorflow/tfjs';
import {MnistData} from './data';
When I am exporting this I am getting the error "ParseError: 'import' and 'export' may appear only with 'sourceType: module'". How can I solve this error?
Many thanks in advance,
Andi
You can use esmify to add ES Modules support to browserify:
browserify index.js -p esmify > bundle.js
Refer to the project's readme for more usage info.
Browserify takes module exports and basically copy pastes them into your javascript file. This error is simply telling you the syntax of your statements aren't supported by browserify currently (basically, can't do es6+).
So the first thing you want to do is run the file through babel to transpile it down to es2015 or whatever browserify needs to recognize the proper export syntax.
I am trying to learn Node and React and I ran into an interesting problem where - in the import statement like below, I need to explicitly type the file format (.jsx) otherwise, the compiler borks up and complains that it cannot find App.js file.
import App from './App.jsx';
Note - App is a jsx file and saved as App.jsx. I used create-react-app for boilerplate code.
Also, I found some more information on GitHub on the lines of "The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore."
https://github.com/facebook/create-react-app/issues/87
So, it looks like a non-issue as long as save it as .js and I have babel to compile ES6.. Thanks everyone!
Here your assumption is incorrect.
If I am right then you are assuming that if your file is .jsx, then you don't need to specify the file extension in the import statement to import .jsx file.
But its the other way round.
If you don't specify the extension of the file then compiler assumes that it is a .js file. So, there is nothing wrong with the behavior that you are seeing.
OR
If you don't want to include extensions in the import statement then just create .js files. Compiler will automatically detect the jsx written inside it. This is the easiest way to fool import statement.
Any javascript react snippets will not show up in a plain .js file only a .jsx file
I suggest that closing the running project on Browser
(ctrl + c / command + c on terminal to finish running project) and do
'yarn start' or 'npm start' again. then it would work!
React sometimes shows errors when you add new files like jsx, js, etc..
and I also had the same problem with you.
(I changed App.js to App.jsx and webppack error was occured).
In these case re-starting project would be the solution!
finally you don't need to specify file extension (like the other answers suggestion).
I would like to use a node.js module from https://github.com/asbjornenge/react-datalist using browserify.
I did install the module locally at my working directory.
In that directory, I created a javascript file, main.jsx
var React = require('react');
var ReactDatalist = require('react-datalist');
var options = ['apple','orange','pear','pineapple','melon'];
React.render(<ReactDatalist list="fruit" options={options} />, document.body);
Then, I reactify like this:
browserify -t reactify main.jsx > main.js
So far so good, but the problem is when I want to browserify:
browserify main.js > bundle.js
I got an error:
Error: Cannot find module './components/DataList' from '...my working directory...'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)
In ...my working directory../node_modules/react-datalist/src/ReactDataList.js, this is defined:
import React from 'react'
import DataList from './components/DataList'
import DataListOption from './components/DataListOption'
import layout from './styles/react-datalist.styl'
This is unclear to me about the scope of import. I thought node.js import mechanism should work locally, but why does it try to find './components/DataList' right from my working directory?
There must be some concept about importing modules I don't know yet. So I would appreciate if you can point out to some references.
I feel embarrassed now. The problem is I didn't realize the transformation step and the bundling step are already combined into a single command line. Hence, instead of
browserify -t reactify main.jsx > main.js
browserify main.js > bundle.js
Do this
browserify -t reactify main.jsx > bundle.js
When I try to import a local file it either throws an error at runtime but compiling it using tsc works. When I make it work for node.js, typescript throws an error at compile time.
When I do
import A = require("./A");
node.js complains, that it can not find the A module and typescript compiles just fine.
But when I change it to
import A = require("./js/A");
node.js can find the module but Typescript tells me there is an error.
The layout is like this:
js
\- A.ts
\- B.ts
I compile the files separately and I already tried searching for changing the root directory for the typescript compiler but I couldn't find anything.
Without seeing how you are compiling the TypeScript, and without seeing how you are attempting to require() these files from node, it's hard to answer this question.
Even so, I can tell you that both TypeScript and node.js are expecting require() to be given a path which is relative to the file doing the require.
If I were to have a js/A.ts that looked like so:
import B = require("./B");
console.log(B.thing);
And a js/B.ts that looked like so:
var myStuff = {
thing: "I'm a thing!"
}
export = myStuff;
I could then compile both files with a single tsc -m commonjs ./js/A.ts
And then I could run node with: node ./js/A.js and would see the output:
I'm a thing!